<template>
  <div>
    <TopBar title="确认订单"></TopBar>
    <div class="addrs">
      地址：
    </div>
    <div class="books">
      <div class="geren">
            <div class="name_mobile">
            <div style="width:130px">名字：{{book_list.name}}</div>
            <div>手机号：{{book_list.mobile}}</div>
        </div>
        <div>
            详细地址：{{book_list.detail}}
        </div>
        </div>
        <div class="addrs">
          商品：
        </div>
          <div class="dadaw" @click="$goPage('/info?id=' + id)">
            <div>
              <img class="img" :src="good_list.img" alt="" />
            </div>
            <div class="namedd">
              <div class="g_name">
                {{good_list.g_name}}
              </div>
              <div>
                {{good_list.burdening}}
              </div>
            </div>

            
          </div>
        <div class="addrs">
          价钱：
        </div>
        <div class="price">
          ￥ {{price}}.00 元
        </div>
        <div class="addrs">
          优惠券：
        </div>
        <div class="price">
          ￥ 0.00 元
        </div>
        <div class="addrs">
          运费：
        </div>
        <div class="price">
          ￥ {{freight}}.00 元
        </div>
        <div class="addrss">
          总价：
        </div>
        <div class="price">
          ￥ {{totalSumAll}}.00 元
        </div>
        <div class="jie">
          <el-button class="jie1" @click="account">结算</el-button>
        </div>
    </div>
  </div>
</template>

<script>
import TopBar from "@/components/TopBar";
import Book2 from "@/components/Book2";

export default {
  name: "CateListView.vue",
  components: {
    TopBar,
    Book2,
  },
  data() {
    return {
      id: this.$route.query.id,
      book_list: {},
      cate_name: "",
      price:this.$route.query.price,
      good_list:{},
      freight:10,
      total_prices:'',
    }
  },
  mounted() {
    this.getData()
    this.gooddata()
  },
  methods: {
    account(){
      this.$axios.post('customer/order/',{
        fid:this.id,
        bid:this.good_list.bus_user,
        money:this.totalSumAll,
      },{
        headers:{
          'Authorization':localStorage.getItem('token') || ''
        }
      }).then(res => {
          console.log('>>>>>>>>>',res.data.url)
          window.location.href = res.data.url
        })
    },
    gooddata(){
      this.$axios.get('business/goods/info/' + this.id + '/').then(res => {
          console.log('>>>>>>>>>',res.data.data)
          if (res.data.code == 200) {
            console.log('>>>>>>>>>',res.data.data)
            this.good_list = res.data.data
          }
        })
    },
    getData() {
        this.$axios.get('customer/daar/').then(res => {
          console.log('>>>>>>>>>',res.data.data)
          if (res.data.code == 200) {
            console.log('>>>>>>>>>',res.data.data)
            this.book_list = res.data.data
          }
        })
    }
  },
  computed:{
      totalSumAll(){
        let totalSumAll = 0;
        totalSumAll = this.price*1 + this.freight*1
        return totalSumAll
      },
  }
}
</script>

<style scoped>
.books {
  margin-top: 20px;
  padding: 0 10px;
}
.geren{
    margin-left: 20px;
  }
  .ivu-tabs-ink-bar {
    background-color: rgb(97, 191, 167) !important;
  }
  .dadaw{
    margin-left: 20px;
    display: flex;
  }
  .ivu-tabs-nav .ivu-tabs-tab-active {
    color: rgb(97, 191, 167) !important;
  }
  .jie{
    text-align: right;
    margin-top: 20px;
    margin-right: 20px;
    

  }

  .jie1{
    background: coral;
    color:rgb(0, 0, 0);
  }
  .g_name{
    font-size: 25px;
    margin-bottom: 20px;
  }
  .price{
    color:crimson;
    margin-right: 20px;
    text-align: right;
  }
  .namedd{
    margin-left: 12px;
  }
  .page {
    background-color: rgb(242, 242, 242);
    min-height: 100vh;
  }
  .btn, .btn:hover {
  background-color:rgb(137, 241, 255);
  border: none;
  margin: 20px 0px 30px;
  height: 40px;
  width: 50%;
  color: #000000;
  border-radius: 20px;
}
  .header {
    padding: 15px;
  }
  
  .img {
    width: 100px;
    height: 150px;
    border-radius: 10px;
  }
  
  .title {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 6px;
  }
  .addrs{
    margin-left: 20px;
    font-size: 20px;
    margin-top: 20px;
  }
  .desc {
    font-size: 14px;
    margin-bottom: 10px;
    overflow: hidden;
    height: 45px;
  }
  
  .btn {
    width: 100%;
  }
  
  .btn1, .btn1:hover {
    background-color: rgb(97, 191, 167);
    color: #FFF;
    border: none;
  }
  
  .menu_item {
    padding: 15px 10px;
    border-bottom: 1px solid #CCC;
  }
  
  .menu_title {
    color: #000;
    font-size: 16px;
    font-weight: bold;
  }
  
  .active {
    color: rgb(97, 191, 167);
  }
  
  .tag_box {
    display: flex;
    justify-content: start;
    margin-top: 10px;
  }
  
  .tag {
    border: 1px solid rgb(97, 191, 167);
    padding: 0 5px;
    border-radius: 6px;
    color: rgb(97, 191, 167);
    margin-right: 10px;
  }
  .addrss{
    margin-left: 20px;
    color:coral;
    font-size: 25px;
    font-weight:bolder;
  }
  .comment {
    padding: 15px 20px;
    /*border-bottom: 1px solid #DDDDDD;*/
  }
  
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  
  .hot {
    background-color: #FFFFFF;
    border: 1px solid rgb(97, 191, 167);
    color: rgb(97, 191, 167);
  }
  
  .date {
    color: #BBBBBB;
  }
  
  .like {
    text-align: right;
    color: indianred;
    font-size: 18px;
  }
  
  .like span {
    font-size: 14px;
    margin-left: 6px;
    align-items: center;
  }
  
  .re_comm {
    width: 100%;
    color: #999999;
    margin-left: 10px;
    margin-top: 15px;
    border-bottom: 1px solid #DFDFDF;
    position: relative;
  }
  
  .btn_box {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .name_mobile{
    display: flex;
  }
</style>